<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big-mobile{width: 800px; height: 520px; border: 1px solid black; margin: 72px auto;border-radius: 10px; position: relative; padding:20px; box-sizing: border-box;}
			.big-mobile>img{  position: absolute; top:300px; left: 0px;}
			.big-mobile>div{ width: 200px; height: 200px; float: left; margin: 26px;}
			
			.big-mobile p{ text-align: center;}
			
			.big-mobile .one p{background: -webkit-linear-gradient(top,#f24141,#fff 50%,#fe6e6e);width: 172px;height: 30px;margin:20px 10px;border-radius: 100px;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);color: #2d2d2d;text-align: center;
line-height: 30px; cursor: pointer;}
			.big-mobile .two p{background: -webkit-linear-gradient(top,#f4a847,#fff 50%,#ffc479);width: 172px;height: 30px;margin:20px 10px;border-radius: 100px;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);color: #2d2d2d;text-align: center;
line-height: 30px; cursor: pointer;}
			.three p{background: -webkit-linear-gradient(top,#36e4bf,#fff 50%,#87f3dc);width: 172px;height: 30px;margin:20px 10px;border-radius: 100px;-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.6);color: #2d2d2d;text-align: center;
line-height: 30px; cursor: pointer;}

			.big-mobile .one img,.two img,.three img{ width: 200px; height: 200px; border-radius: 50%;
			border-radius: 50%;border: 1px dashed rgba(247, 28, 103, 0.62);box-shadow: 0px 8px 8px rgba(63, 59, 59, 0.46); cursor: pointer; transition:all 1s linear;}
			.big-mobile .one img:hover,.two img:hover,.three img:hover{-webkit-transform:rotate(360deg);}
			
			.big-mobile .closed{ width: 80px;height: 35px; line-height: 35px; position: absolute; right: -26px;top: -27px;background: rgba(0,0,0,0.4);text-align: center;font: 16px/30px "微软雅黑" "宋体";color: #fff;cursor: pointer; border-top-right-radius: 10px; border-bottom-left-radius: 10px;}
		</style>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.big-mobile .closed').click(function(){
					$('.big-mobile').hide(500);
				})
			})
		</script>
	</head>
	<body>
		<div class="big-mobile">
			<div class="one">
				<div><img src="img/web-1.jpg" width="200" height="200"></div>
				<p>梦芭莎手机版</p>
			</div>
			<div class="two">
				<div><img src="img/web-2.jpg" width="200" height="200"></div>
				<p>驴妈妈手机版</p>
			</div>
			<div class="three">
				<div><img src="img/web-3.jpg" width="200" height="200"></div>
				<p>美食天下手机版</p>
			</div>
			<img src="img/header_bg_02.png" width="800" height="200" >
			<div class="closed">关闭</div>
		</div>
		
	</body>
</html>
